<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>[Manage] Add Rental Property</title>

        <link rel="stylesheet" href="css/gmaps/default.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input-facebook-2.css" type="text/css" />
        <link rel="stylesheet" href="css/jquery/jquery-ui.css" type="text/css" />

        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
        </style>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.10.3-ui.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>
        <script type="text/javascript" src="js/page/listingedit.js"></script>  
        <script type="text/javascript" src="js/page/listingform.js"></script> 
        <script type="text/javascript" src="js/page/geocoder.js"></script> 
                
        <%@ include file="include/listingTokenizerUtils.jsp" %>
        <%@ include file="include/listingMaps_manage.jsp" %>  
        <%@ include file="include/listingadd_incl.jsp" %>  
        
        <link rel="stylesheet" href="css/bootstrap/prettify.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap/index.css" rel="stylesheet">
        
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/bootstrap/bootstrap-wysiwyg.js"></script>
        <script src="js/bootstrap/jquery.hotkeys.js"></script>
        
        
        <script type="text/javascript">
            $(function() {
                $('#editor').wysiwyg();
                initialize();
            });
            
            function submitListing() {
                var desc = $('#editor').html();
                $('#listing-description').val(desc);     
                $("form#listing-form").submit();
            }
        </script>
        
    </head>



    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            
            <div style="width: 100%; text-align: left; font-family: Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    
                    <h1>&nbsp;[Manage] Add Rental Property</h1>

                    <form id="listing-form" action="listing.htm" method="post">
                        
                        <table cellpadding="5" cellspacing="5" style="width: 1000px;">    
                            <tr>
                                <td colspan="2">
                                    <span style="font-size: 20px; font-weight: bold;">Basic Info</span>
                                    <hr>
                                </td>
                            </tr>
                                        
                            <tr>
                                <td>
                                    
                                    <table cellpadding="5" cellspacing="5" width="1000px">
                                        <tr>
                                            <td width="180px;">
                                                I'm posting this as a:
                                            </td>
                                            <td>
                                                
                                                <select id="posterTypeID" name="posterTypeID" style="width:200px; padding: 5px;">
                                                    <option value="0" >-- Choose one --</option>
                                                    <option value="1" selected>Land Owner</option>
                                                    <option value="2" >Agent</option>
                                                    <option value="3">Broker</option>
                                                    <option value="4">Property Manager</option>
                                                </select>
                                                <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) &nbsp; Specify if you are a land owner, an agent, a broker or a property manager</span>
                                                <br>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td width="150px">
                                                Property Type:
                                            </td>
                                            <td>
                                                <select id="listing-propertyType" name="propertyTypeID" style="width:200px; padding: 5px;">
                                                    <option value="0">-- Choose one --</option>
                                                    <option value="2" selected>Condominium</option>
                                                    <option value="3">Apartment</option>
                                                    <option value="4">Townhouse</option>
                                                    <option value="1">House</option>
                                                    <option value="5">Room</option>
                                                </select>
                                                <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                            </td>
                                            <td>                 
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                        
                                        
                                        <tr>
                                            <td style="vertical-align: top; padding-top:15px;">
                                                Rental Terms:
                                            </td>
                                            <td>
                                                <table cellspacing="5" cellpadding="5">
                                                    <tr>
                                                        <td width="10px;"><input type="checkbox" id="listing-leaseLongTerm" name="leaseLongTerm" value="1"/></td>
                                                        <td><span style="color: black; font-size:13px;">For Long Term</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="10px;"><input type="checkbox" id="listing-leaseShortTerm" name="leaseShortTerm" value="1"/> </td>
                                                        <td><span style="color: black; font-size:13px;">For Short Term</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2">                         
                                                            <span style="color: gray; font-style: italic; font-size:12px;">                                                                
                                                               <p>Tip: &nbsp;Long term rents span from 6 months minimum to more than a year.</p>
                                                               <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Short term rents are on a daily basis, weekly, or monthly but are less than 6 months.</p>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        
                                    </table>
                                    
                                </td>
                            </tr>
                            
                            
                            <tr>
                                <td colspan="2">
                                    <span style="font-size: 20px; font-weight: bold;">Rental Rates</span>
                                    <hr>
                                    <table border="0" cellpadding="5" cellspacing="5" width="1000px">
                                        
                                        <tr>
                                            <td width="465px" style="vertical-align: top;">
                                                <fieldset style="height:217px;">
                                                    <legend>&nbsp;Long Term Rental Rates:&nbsp;</legend>
                                                    <br>
                                                    <table cellspacing="5" cellpadding="5">
                                                        <tr>
                                                            <td>
                                                                Monthly Rate:
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                            </td>
                                                            <td>
                                                                &#8369; <input id="listing-longMonthRate" type="text" name="longMonthRate" style="width:200px; padding: 5px;" /> 
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </fieldset>
                                            </td>
                                            <td style="vertical-align: top; border-left: 0px solid #cacaca">
                                                <fieldset style="height:217px;">
                                                    <legend>&nbsp;Short Term Rental Rates:&nbsp;</legend>
                                                    <br>
                                                    <table cellspacing="5" cellpadding="5"> 
                                                        <tr>
                                                            <td>Daily Rate:</td>
                                                            <td>
                                                                &#8369; <input id="listing-shortDayRate" type="text" name="shortDayRate" style="width:200px; padding: 5px;"/> 
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>Weekly Rate:</td>
                                                            <td>
                                                                &#8369; <input id="listing-shortWeekRate" type="text" name="shortWeekRate" style="width:200px; padding: 5px;"/> 
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>Monthly Rate:</td>
                                                            <td>
                                                                &#8369; <input id="listing-shortMonthRate" type="text" name="shortMonthRate" style="width:200px; padding: 5px;"/> 
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <br>
                                                </fieldset>
                                            </td>
                                            
                                        </tr>
                                        
                                        
                                        <tr>
                                            <td colspan="2">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            
                                                        </td>
                                                        <td>                                                            
                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        
                                    </table>
                                </td>
                            </tr>  
                            
                            <tr>
                                <td colspan="3">
                                    <br>
                                    <span style="font-size: 20px; font-weight: bold;">Location & Address</span>
                                    <hr>

                                    <table border="0" cellpadding="5" cellspacing="5">
                                        <tr>
                                            <td style="vertical-align: top">
                                                <input id="address" type="text" name="address" style="width:400px; padding: 3px; display: none"/>
                                                <table cellpadding="5" cellspacing="5">
                                                    <tr>
                                                        <td>Building or Village Name:</td>
                                                        <td>
                                                            <input id="listing-structure" type="text" name="structure" style="width:200px; padding: 3px;" value="${model.listing.structure}"/>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Floor:</td>
                                                        <td>
                                                            <input id="listing-floor" type="text" name="floor" style="width:200px; padding: 3px;" value="${model.listing.floor}"/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Unit or House Number:</td>
                                                        <td>
                                                            <input id="listing-number" type="text" name="number" style="width:200px; padding: 3px;" value="${model.listing.number}"/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Street:</td>
                                                        <td>
                                                            <input id="listing-street" type="text" name="street" style="width:200px; padding: 3px;" value="${model.listing.street}"/>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>City:</td>
                                                        <td>
                                                            <select id="listing-city" name="city" style="width:200px; padding: 3px;" readonly>
                                                                <option value="" selected>--- Choose One ---</option>
                                                                <option value="Makati">Makati</option>
                                                                <option value="Taguig">Taguig</option>
                                                                <option value="Mandaluyong">Mandaluyong</option>
                                                                <option value="Pasig">Pasig</option>
                                                                <option value="Quezon City">Quezon City</option>
                                                                <option value="Manila">Manila</option>
                                                                <option value="Pasay">Pasay</option>
                                                                <option value="Paranaque">Paranaque</option>
                                                                <option value="Muntinlupa">Muntinlupa</option>
                                                                <option value="San Juan">San Juan</option>
                                                                <option value="Cebu">Cebu</option>
                                                            </select>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Region:</td>
                                                        <td>
                                                            <select id="listing-region" name="region" style="width:200px; padding: 3px;" readonly>
                                                                <option value="Metro Manila" selected>National Capital</option>
                                                            </select>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Country:</td>
                                                        <td>
                                                            <select id="listing-country" name="country" style="width:200px; padding: 3px;" readonly>
                                                                <option value="Philippines" selected>Philippines</option>
                                                            </select>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>
                                                    </tr> 
                                                </table>
                                            </td>
                                            <td colspan="2">
                                                <div id="map_canvas" style="width:400px; height:300px; position:relative; left:0%"></div>
                                            </td>
                                        </tr> 
                                        <tr>
                                            <td colspan="2"><span style="font-weight: bold;">Map Coordinates:</span> navigate and right click on the map to get exact coordinates.</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <table cellpadding="5" cellspacing="5">
                                                    <tr>
                                                        <td>Latitude:</td>
                                                        <td><input id="lat" type="text" name="lat" style="width:200px; padding: 5px;" value="${model.listing.lat}" readonly="readonly" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Longitude:</td>
                                                        <td><input id="lng" type="text" name="lng" style="width:200px; padding: 5px;" value="${model.listing.lng}" readonly="readonly" /></td>
                                                    </tr> 
                                                </table>
                                            </td>    
                                        <!--
                                        <tr>
                                            <td></td>
                                            <td>
                                                <input type="button" value=" geocode address " onclick="runGeocode()"/>
                                            </td>
                                        </tr>
                                        --> 
                                    </table>
                                </td>
                            </tr>    

                            <tr>
                                <td colspan="2">
                                    <br>
                                    <span style="font-size: 20px; font-weight: bold;">Property Details</span>
                                    <hr>
                                    <table cellpadding="5" cellspacing="5">                                        
                                        <tr>
                                            <td style="vertical-align: top;">
                                                <table cellpadding="5" cellspacing="5">

                                                    <tr>
                                                        <td>Floor Area (Sqm.):</td>
                                                        <td>
                                                            <input id="listing-sqArea" type="text" name="sqArea" style="width:200px; padding: 5px;"/>                        
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>Bedrooms:</td>
                                                        <td>
                                                            <select id="listing-numBedrooms" name="numBedrooms" style="width:200px; padding: 5px;">
                                                                <option value="0" selected="selected">none</option>
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                                <!--<option value="999">more than 10</option>-->
                                                                <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                            </select>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>Bathrooms:</td>
                                                        <td>
                                                            <select name="numBathrooms" style="width:200px; padding: 5px;">
                                                                <option value="0" selected="selected">none</option>
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                                <!--<option value="999">more than 10</option>-->
                                                                <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    
                                                    <tr>
                                                        <td width="150px">Furnishing:</td>
                                                        <td>
                                                            <select id="listing-furnishing" name="furnishTypeID" style="width:200px; padding: 5px;">
                                                                <option value="0" >-- Choose one --</option>
                                                                <option value="3" selected>Fully Furnished</option>
                                                                <option value="2">Semi Furnished</option>
                                                                <option value="1">Unfurnished</option>
                                                            </select>
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                                        </td>
                                                        <td>                 
                                                        </td>
                                                        <td>
                                                        </td>
                                                    </tr>
                                                    
                                                </table>
                                            </td>
                                            <td style="vertical-align: top; border-left: 1px solid #cacaca">
                                                <table cellpadding="5" cellspacing="5">
                                                    <tr>                                                        
                                                        <td style="vertical-align: top; padding-left: 20px;">Unit Features and Amenities:</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="vertical-align: top; padding-left: 50px;">
                                                            <!--
                                                            <input id="tags-amenities" name="amenityIDs" type="text" />  
                                                            -->
                                                            <input id="amenityIDs" name="amenityIDs" type="hidden" />  
                                                            <c:forEach items="${model.amenities}" var="amenity">
                                                                <div style="padding:3px;"> 
                                                                    <input id="amenity-${amenity.id}" type="checkbox" name="amenitycbx" value="${amenity.id}" onclick="checkAmenities()"/> ${amenity.title}
                                                                </div>
                                                            </c:forEach>
                                                        </td> 
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-left: 20px;">
                                                            <span style="color: gray; font-style: italic; font-size:12px;">&nbsp; note: Tick the boxes of applicable features and amenities. </span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                            <tr>
                                <td colspan="2">
                                    <br>
                                    <span style="font-size: 20px; font-weight: bold;">Additional Info</span>
                                    <hr>
                                    <table cellspacing="5" cellpadding="5">
                                        <tr>
                                            <td>Title of Ad:</td>
                                            <td>
                                                <input id="listing-title" type="text" name="title" style="width:700px; padding: 5px;"/>                        
                                                <span style="color: gray; font-style: italic; font-size:12px;">&nbsp;(required) </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="vertical-align: top; padding-top: 10px;">Description:</td>
                                            <td>
                                                <!--
                                                <textarea id="listing-description" name="description" rows="8" cols="99" style="padding: 3px;"></textarea>
                                                -->
                                                
                                                <div style="width: 850px;">
                                                    <div id="editor"></div>
                                                </div>
                                                
                                                <textarea id="listing-description" name="description" style="display:none;">

                                                </textarea>
                                                
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>  


                            <tr>
                                <td colspan="2">
                                    <br>
                                    <span style="font-size: 20px; font-weight: bold;">Tags</span>
                                    <hr>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <table cellspacing="5" cellpadding="5">
                                        <tr>
                                            <td>Place Tags:</td>
                                            <td><input id="tags-places" name="placeIDs" type="text" /></td>
                                        </tr>
                                    </table>                                                            
                                </td>            
                            </tr>     

                            <tr>
                                <td colspan="2">
                                    <br>
                                    <span style="font-size: 20px; font-weight: bold;">Manager Fields</span>
                                    <hr>
                                    
                                    <table cellpadding="5" cellspacing="5">
                                        <tr>
                                            <td>Expiry Date:</td>
                                            <td>
                                                <fmt:formatDate value="${model.listing.availabilityDate}" type="date" pattern="MM/dd/yyyy" var="strExpiryDate" />
                                                <input id="listing-expiryDate" name="expiryDate" type="text" style="width:200px; padding: 3px;" value="${strExpiryDate}"/>   
                                                <span style="font-size: 13px">Format should be: mm/dd/yyyy</span>
                                            </td>          
                                        </tr>
                                        <tr>
                                            <td>Creator ID:</td>
                                            <td>
                                                <input id="creatorID" name="creatorID" type="text" style="width:200px; padding: 3px;" value="${model.listing.creatorID}"/>                        
                                            </td>                       
                                        </tr>
                                        <tr>
                                            <td>Verified:</td>
                                            <td>
                                                <c:if test="${model.listing.verified}">
                                                    <input id="verified" name="verified" type="checkbox" style="padding: 3px;" value="1" checked="checked"/> 
                                                </c:if>            
                                                <c:if test="${!model.listing.verified}">
                                                    <input id="verified" name="verified" type="checkbox" style="padding: 3px;" value="1" /> 
                                                </c:if>                
                                            </td>                       
                                        </tr>   
                                    </table>
                                </td>
                            </tr>

                            

                            <tr>
                                <td align="right" colspan="2">
                                    <br>
                                    <input type="submit" value=" Create listing and proceed to adding Photos " style="padding:5px; font-size: 14px;"/>
                                    <input type="hidden" name="a" value="9003" />
                                    <input type="hidden" name="s" value="1" />
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>

                <br><br>                

            </div>

            <div>
                <img src="${model.props.appPath}/img/footer-foot.jpg" style="border: 0px solid black; display: block; width: 100%;" />
            </div>

        </div>

    </body>



    <body>

        <%@include file="header.jsp" %>

        <br><br>

        <div id="map_canvas" style="width:100%; height:200px; position:relative; left:0%"></div>

        <br><br>

    </body>
</html>
